<template>
    <div class="lora">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i>LoRa配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">GTW ID</div>
                        <el-input v-model="form.gateway_ID" :disabled="false"></el-input>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">server_address</div>
                        <el-input v-model="form.server_address" :disabled="false"></el-input>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">serv_port_up</div>
                        <el-input v-model="form.serv_port_up" :disabled="false"></el-input>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">serv_port_down</div>
                        <el-input v-model="form.serv_port_down" :disabled="false"></el-input>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">keepalive_interval</div>
                        <el-input v-model="form.keepalive_interval" :disabled="false"></el-input>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">stat_interval</div>
                        <el-input v-model="form.stat_interval" :disabled="false"></el-input>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">push_timeout_ms</div>
                        <el-input v-model="form.push_timeout_ms" :disabled="false"></el-input>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">forward_crc_valid</div>
                          <el-select v-model="form.forward_crc_valid" placeholder="请选择">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">forward_crc_error</div>
                          <el-select v-model="form.forward_crc_error" placeholder="请选择">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>

                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">forward_crc_disabled</div>
                          <el-select v-model="form.forward_crc_disabled" placeholder="请选择">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>

                    </el-col :md="24" :lg="24">
                </el-form>
        </div>
        <el-button type="primary" @click="onSubmit">提交</el-button>

    </div>
</template>

<script>
    export default {
        name: 'baseform',
        data: function(){
            return {
                data:{},
                servicename:'cc',
                form: {
                    gateway_ID: '',
                    server_address: '',
                    serv_port_up: '',
                    serv_port_down: '',
                    keepalive_interval: '',
                    stat_interval: '',
                    push_timeout_ms: '',
                    forward_crc_valid: false,
                    forward_crc_error: false,
                    forward_crc_disabled: false
                },
                options: [{
                  value: true,
                  label: 'true'
                }, {
                  value: false,
                  label: 'false'
                }],
                select_value1:"true",
                select_value2:"true",
                select_value3:"true"
            }
        },
        mounted() {
            var that = this;
            this.getData();
        },
        methods: {
            onSubmit() {
                let self = this;   
                let url = new URL("http://" + location.hostname + ":3000/loracfg");
                let body = JSON.parse(JSON.stringify(self.form))
                body.serv_port_up = body.serv_port_up == ''?'':parseInt(body.serv_port_up)
                body.serv_port_down = body.serv_port_down == ''?'':parseInt(body.serv_port_down)
                body.keepalive_interval = body.keepalive_interval == ''?'':parseInt(body.keepalive_interval)
                body.stat_interval = body.stat_interval == ''?'':parseInt(body.stat_interval)
                body.push_timeout_ms = body.push_timeout_ms == ''?'':parseInt(body.push_timeout_ms)
                fetch(url,
                    {
                        method:"POST",
                         headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify(body)
                    }).then(function(res){
                        if(res.status == 200){
                            self.$message.success('提交成功！');
                        }
                    })
            },
            getData(){
                let self = this;   
                let url = new URL("http://" + location.hostname + ":3000/loracfg");
                fetch(url,
                    {
                        method:"GET",
                         headers: {
                            "Content-Type": "application/json"
                        }
                    }).then(function(res){
                        console.log("res",res)
                        return res.json()
                    }).then(function(res){
                        console.log("res json",res)
                        self.form = res;
                    })
            }
        }
    }
</script>
<style>
    .lora .sub-title{
        font-size: 14px;
        font-family: 微软雅黑;
        font-weight: bold;
        color: #767576;
    }
    .lora .container .el-col{
        padding: 10px 0px;
    }
    .lora .container .el-form{
        overflow: hidden;
    }
    .lora .container .el-input{
        width: 500px
    }
    .lora .el-button{
        margin: 10px;
    }
</style>